<template>
  <div class="set_page">
    <!--    顶部返回按钮-->
    <div class="head_return" @click="headReturn"></div>
    <!-- 个人中心顶部标题 -->
    <div class="personal_tit">
      <img src="../../assets/image/personal/personalTop.png" alt="" />
    </div>
    <div class="set_content">
      <div class="rec_con_tit">设置</div>
      <div class="set_info">
        <div class="info_tit">
          <div
            :class="infoTagIndex == 1 ? 'curr_info_tit' : ''"
            @click="changeTag(1)"
          >
            基础设置
          </div>
          <div
            :class="infoTagIndex == 2 ? 'curr_info_tit' : ''"
            @click="changeTag(2)"
          >
            个人设置
          </div>
        </div>

        <!-- 基础设置 -->
        <div class="basic_settings" v-show="infoTagIndex == 1">
          <div class="basic_top">
            <div class="top_phone">
              <span>手机号</span>
              <span>18666666666</span>
              <span>修改手机</span>
            </div>
            <div class="top_portrait">
              <span>头像</span>
              <img src="../../assets/image/personal/portrait.png" alt="" />
              <span>上传</span>
            </div>
          </div>
          <div class="info_tit">
            <div>账号设置</div>
          </div>
          <div class="basic_con">
            <div class="con_item">
              <span>用户名</span>
              <input type="text" placeholder="输入用户名" />
            </div>
            <div class="con_item">
              <span>密码</span>
              <input type="text" placeholder="输入密码" />
            </div>
            <div class="con_btn">确定</div>
          </div>
        </div>
        <!-- 个人设置 -->
        <div class="user_settings" v-show="infoTagIndex == 2">
          <el-form 
            ref="form" 
            :model="form" 
            label-width="1.46rem"
            label-position="left"
            >
            <el-form-item label="真实姓名">
              <el-input v-model="form.name" placeholder="输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="所在公立学校">
              <el-input v-model="form.school" placeholder="输入所在学校"></el-input>
            </el-form-item>
            <el-form-item label="所属年级">
              <el-input v-model="form.grade" placeholder="输入所在年级"></el-input>
            </el-form-item> 
            <el-form-item label="所在地区">
              <el-select v-model="form.region" placeholder="请选择所在地区">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item> 
            <el-form-item label="具体地址">
              <el-input v-model="form.address" placeholder="输入具体地址"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoTagIndex: 1,
      form: {
          name: '',
          school: '',
          grade: '',
          region: '',
          address: ''
      },
    };
  },
  methods: {
    // 返回上一页
    headReturn() {
      this.$router.go(-1);
    },
    // 切换
    changeTag(index) {
      this.infoTagIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.set_page {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/image/personal/proback.png") no-repeat;
  background-size: 100% 100%;
  .head_return {
    position: absolute;
    z-index: 10;
    top: 0.3rem;
    left: 0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    background: url("../../assets/image/lesson/return.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    & > img {
      width: 100%;
      height: 100%;
    }
  }
  .personal_tit {
    margin: 0 auto;
    width: 2.65rem;
    height: 1.01rem;
    & > img {
      width: 100%;
    }
  }

  .set_content {
    padding: 0.86rem 1.1rem 0 1.1rem;
    position: relative;
    margin: 0.1rem auto 0 auto;
    width: 16.8rem;
    height: 8.49rem;
    background: url("../../assets/image/personal/recordt.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    .rec_con_tit {
      position: absolute;
      left: 0.2rem;
      top: 0.12rem;
      width: 0.8rem;
      text-align: center;
      height: 0.18rem;
      color: #fff;
      font-size: 0.16rem;
      cursor: pointer;
    }
    .set_info {
      font-size: 0.16rem;
      color: #333;
      .info_tit {
        display: flex;
        border-bottom: 1px solid #999;
        & > div {
          margin-right: 0.52rem;
          height: 0.52rem;
          line-height: 0.52rem;
          font-size: 0.18rem;
          font-weight: 700;
          color: #353535;
          cursor: pointer;
        }
        .curr_info_tit {
          color: #505fd1;
          border-bottom: 2px solid #505fd1;
        }
      }
      .basic_settings {
        .basic_top {
          height: 2.78rem;
          .top_phone {
            display: flex;
            height: 1.16rem;
            line-height: 1.16rem;
            & span:nth-child(2) {
              margin: 0 1.1rem 0 0.81rem;
            }
            & span:last-child {
              margin: auto 0;
              width: 0.88rem;
              height: 0.32rem;
              line-height: 0.32rem;
              text-align: center;
              border: 1px solid #6a7cec;
              color: #6a7cec;
              border-radius: 0.16rem;
              cursor: pointer;
            }
          }
          .top_portrait {
            display: flex;
            line-height: 0.82rem;
            & > img {
              margin: 0 0.27rem 0 0.74rem;
              width: 0.82rem;
              height: 0.82rem;
              border-radius: 50%;
              vertical-align: middle;
            }
            & span:last-child {
              margin: auto 0;
              width: 0.58rem;
              height: 0.28rem;
              line-height: 0.28rem;
              text-align: center;
              color: #fff;
              background: #7888ca;
              border-radius: 0.14rem;
              cursor: pointer;
            }
          }
        }
        .basic_con {
          //   height: 4.2rem;
          .con_item {
            margin-top: 0.25rem;
            height: 0.52rem;
            line-height: 0.52rem;
            & > span {
              display: inline-block;
              width: 1.14rem;
            }
            & > input {
              padding-left: 0.19rem;
              width: 2.18rem;
              height: 100%;
              color: #494949;
              border: 1px solid #c6c6c6;
              border-radius: 0.05rem;
            }
          }
          .con_btn {
            margin: 0.28rem 0 0 1.14rem;
            width: 0.68rem;
            text-align: center;
            color: #fff;
            font-size: 0.14rem;
            height: 0.32rem;
            line-height: 0.32rem;
            border-radius: 0.05rem;
            background: #7888ca;
            cursor: pointer;
          }
        }
      }
      .user_settings { 
          margin-top: 0.56rem;
        /deep/ .el-form-item .el-input{
            width: 2.42rem;
        } 
        /deep/ .el-form-item__content .el-select .el-input{
            width: 2.42rem !important;
        }
      }
    }
  }
}
</style>